<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :stretch="true">
    <el-tab-pane name="first">
      <template #label>
        <span class="custom-label">短视频</span>
      </template>
      <GridLayout />
    </el-tab-pane>
    <el-tab-pane name="second">
      <template #label>
        <span class="custom-label">短剧</span>
      </template>
      <GridLayout />
    </el-tab-pane>
    <el-tab-pane name="third">
      <template #label>
        <span class="custom-label">微电影</span>
      </template>
      <GridLayout />
    </el-tab-pane>
    <el-tab-pane name="fourth">
      <template #label>
        <span class="custom-label">电影</span>
      </template>
      <GridLayout />
    </el-tab-pane>
    <el-tab-pane name="fifth">
      <template #label>
        <span class="custom-label">剧集</span>
      </template>
      <GridLayout />
    </el-tab-pane>
    <el-tab-pane name="sixth">
      <template #label>
        <span class="custom-label">小品</span>
      </template>
      <GridLayout />
    </el-tab-pane>
    <el-tab-pane name="seventh">
      <template #label>
        <span class="custom-label">广告</span>
      </template>
      <GridLayout />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import GridLayout from '../components/GridLayout.vue'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

export default {
  setup() {
    return {
      activeName,
      handleClick,
    }
  },
  name: 'HomePage',
  components: {
    // 注册BackgroundVideo组件  
    GridLayout
  }
}
</script>

<style scoped>
.custom-label {
  font-size: 25px;
  width: 80%;
  justify-content: center;
}
</style>